<template>
  <div style="height: 100%; width: 100%" ref="container">
    <div id="ScoreAcyclic" :style="{ width: width/2+'px', height: height+'px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request.js";
export default {
  props:{
    width:{
      type: Number,
      default: 600,
    },
    height:{
      type: Number,
      default: 300,
    },
    scoreValue:{
      type: Number,
    }
  },
  name: "ScoreAcyclic",
  data() {
    return {
      chartData:{
        total: 100,
        processed: 75,
        unprocessed: 25
      },
      chartInstance: null,
      echart: echarts,
      option: {},
      legendFontSize: 12, // 初始图例文字大小
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("ScoreAcyclic"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      // 配置选项
      // let scoreValue = 75; // 评分值
      // 根据评分值确定颜色
      let scoreColor;
      if (this.scoreValue < 20) {
        scoreColor = '#ff4500'; // 红色
      } else if (this.scoreValue < 80) {
        scoreColor = '#ffcc00'; // 黄色
      } else {
        scoreColor = '#00ff00'; // 绿色
      }
      this.option = {
        tooltip: {
          formatter: '<a style="font-size: 20px">{a}</a> <br/>{b} : {c}分'
        },
        series: [
          {
            name: '单位评分',
            type: 'gauge',
            detail: { formatter: '{value}分' ,
              textStyle: {
                color: scoreColor // 设置详细信息文字颜色
              }
            },
            data: [{ value: this.scoreValue, name: '评分', itemStyle: { color: scoreColor } }],
            axisLine: {
              lineStyle: {
                // 轴线的颜色
                color: [[0.2, '#ff4500'], [0.8, '#ffcc00'], [1, '#00ff00']],
                width: 30 // 轴线的宽度
              }
            },
            pointer: {
              length: '80%', // 指针的长度
              width: 8 // 指针的宽度
            },
            title: {
              show: true,
              offsetCenter: [0, '60%'], // 标题的位置
              textStyle: {
                color: scoreColor // 设置标题文字颜色
              }
            }
          }
        ]
      };
      this.chartInstance.setOption(this.option, true);
      this.handleResizeEnd()
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.legendFontSize = Math.max(Math.floor(this.chartInstance.getWidth() / 30), 10);
        this.updateData(); // 重新渲染 echarts 图表
      }, 1000); // 设置延迟时间，500ms
    },
  },
};
</script>

<style scoped>
</style>
